/*
 * @Author: hyman
 * @Date: 2022-02-10 10:37:44
 * @LastEditors: hyman
 * @LastEditTime: 2022-02-16 11:39:38
 * @Description: 请填写简介
 */
import React from 'react'
import { Input, Tabs, Modal,Toast } from 'antd-mobile'
import { PhoneFill,DeleteOutline } from 'antd-mobile-icons'
import {Link} from 'react-router-dom'
import cookie from 'react-cookies'

const Home = () => {

    const [Type, setType] = React.useState([]);
    const [typeid, setTypeid] = React.useState('0')
    const [typelist, setTypelist] = React.useState([])
    const [keywords, setKeywords] = React.useState('')
    const LoginUser = cookie.load('LoginUser') ? cookie.load('LoginUser') : {}
    const [closeOnAction, setcloseOnAction] = React.useState(false)
    const [id, setId] = React.useState(0)

    // 取消所有订阅和异步任务
    let isUnmount = false;  
    
    React.useEffect(() => {
        async function fetchData() {
            var result = await React.$api.contacttype()
            if (result.code == '1' &&  !isUnmount) {
                result.data.unshift({
                    id: '0',
                    name: "全部",
                })
                setType(result.data)
            }
        }
        fetchData()
        search()
        return () => isUnmount = true; 
    }, [typeid])
    

    const changeType = (data) => {
        setTypeid(data)

    }

    const search = async () => {
        let data = {
            typeid: typeid,
            keywords: keywords,
            userid: LoginUser.id
        }
        let result = await React.$api.contactindex(data)
        if (result.code == '1' &&  !isUnmount) {
            setTypelist(result.data)
        }
    }

    let exeCall = (contact_number) => {
        window.location.href = `tel:${contact_number}`
    }

    // 删除
    const del = (data) => {
        setId(data)
        setcloseOnAction(true)
    }

    const handleCancelClick = (e)  => {
        setcloseOnAction(false)
        if (e.key === 'confirm') {
            async function dels() {
                let data ={
                    id: id,
                    userid: LoginUser.id
                }
                var result = await React.$api.del(data)
                if (result.code == '1' &&  !isUnmount) {
                    Toast.show({
                        content: result.msg,
                    })
                    search()
                }else{
                    Toast.show({
                        content: result.msg,
                      })
                    return false;
                }
            }
            dels()
        }
    }


    return (
        <>
            {/* <!-- 搜索 --> */}
            <div className="search">
                <div className="box">
                    <div className="icon">
                        <span className="glyphicon glyphicon-search"></span>
                    </div>

                    <Input placeholder='请输入内容' className="input" value={keywords} onChange={val => { setKeywords(val) }} />

                    <button onClick={search} className="btn" size="mini" type="default">搜索</button>
                </div>
            </div>
            {/* <!-- 分类 --> */}
            <div className="type wow fadeInUp">
                <Tabs onChange={changeType} activeKey={typeid}>
                    {
                        Type.map((item, index) => {
                            return (
                                <Tabs.Tab title={item.name} key={item.id}>
                                </Tabs.Tab>
                            )
                        })
                    }
                </Tabs>
            </div>
            {/* <!-- 列表 --> */}
            <div className="contact wow fadeInUp" data-wow-delay="100ms">
                <div className="list">
                    {
                        typelist.map((item, index) => {
                            return (
                                <div className="item" key={item.id}>
                                    <div className="content">
                                        <h3 className="title">
                                            <Link to={`/contact/contact/index?typeid=`+ item.id}>
                                                <div>{item.nickname}</div>
                                            </Link>
                                        </h3>
                                        <div className="info">
                                            <div className="icon">
                                                <img src="/images/info.png"></img>
                                            </div>
                                            <div className="desc">
                                                {item.remark}
                                            </div>
                                        </div>
                                    </div>
                                    <div className="call icon">
                                        {/* <img src="/images/call.png"></img> */}
                                        <PhoneFill onClick={exeCall.bind(this,`${item.phone}`)} color='#1afa29' fontSize={24}/>
                                    </div>
                                    <div className="call icon">
                                        <DeleteOutline onClick={(e) => del(item.id, e)} color='#ff3141' fontSize={24}/>
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
            </div>

            <Modal
                className="baseindexmodal"
                content="是否确认删除"
                visible={closeOnAction}
                closeOnAction
                onAction={handleCancelClick}
                actions={[
                    {
                        key: 'cancel',
                        text: '取消',
                    },
                    {
                        key: 'confirm',
                        text: '确认',
                        danger: true,
                    }
                ]}
            >
            </Modal>
        </>
    )
}

export default Home